<template>
    <div style="width: 100%;height: 100%;position: absolute;text-align: left;" id="view-model"></div>
</template>

<script>
import DynamicLoad from '../utils/dynamic-load';
import { RuntimeUtils } from '../utils/runtime-util';
import { ViewerInitializer } from '../utils/viewer-initializer';
import { Base64Util } from '../utils/base64-util';
// eslint-disable-next-line no-unused-vars
let viewObvApi = null;

const addinConfig = [
    {
        id: 'OBVAddins.Walk',
        noButton: false,
    },
    {
        id: 'OBVAddins.Measure',
        noButton: false,
    },
    {
        id: 'OBVAddins.Section',
        noButton: false,
    },
];

export default {
    name: 'ViewModel',
    props: ['modelUrn'],
    data() {
        return {
            token: '',
        };
    },
    methods: {
        // 初始化函数，使用 OBV API 来创建一个 Viewer，并获得 OBVApi 对象。
        async initializeSampleViewer(containerId, urn, getAccessToken, callback) {
            const viewerContainer = document.getElementById(containerId);
            viewObvApi = undefined;
            const options = {
                config3d: {
                    addinConfigs: [...addinConfig],
                },
                applicationOptions: {
                    getAccessToken: getAccessToken,
                    refreshToken: getAccessToken,
                },
                viewerContainer,
                viewerModelItemList: this.formatViewerModel(urn),
            };
            const viewerInitializer = new ViewerInitializer();
            const { obvApi, application } = await viewerInitializer.loadViewModel(options);
            callback(obvApi, application);

            /**
            // 必须保证有前缀： urn: , 否则系统不能够解析。
            if (urn.indexOf('urn:') !== 0) {
                urn = 'urn:' + urn;
            }
            // 初始化view配置
            var options = {
                shouldInitializeAuth: true,
                // env: 'Development', // OBV 的运行环境。 Production：生产环境， Development：试验环境
                https: RuntimeUtils.instance.isServiceHttps, // OBV 的运行环境。 Production：生产环境， Staging：试验环境
                env: RuntimeUtils.instance.obvEnv, // endPoint ? endPoint : location.host,
                getAccessToken: getToken ? getToken : undefined, // 获取 Token 的回调，一个页面中只需要获取一次即可
                refreshToken: getToken ? getToken : undefined, // 刷新 Token 的回调，后台 API 可以提供刷新 Token的函数，而不是使用获取 Token 的函数。
                documentId: urn, // 如果加载多个模型，需使用逗号隔开每个 urn。
                globalOffset: '{"x":0, "y":0, "z":0}', // 指定模型的位置。如果多个模型，则以逗号隔开；必须与 documentId 指定的模型个数一致。
                fullscreen: false,
            };
            // 初始化一个 Viewer，初始化成功后，回调函数会传回创建好的 OBVApi 对象。
            // 可以参看 API 文档，调用 OBVApi 中暴露的函数对 Viewer 进行操作和控制。
            window.BIMBox.Viewing.API.initializeViewer(containerId, options, callback);
             **/
        },
        getAccessToken(cb) {
            cb((this.token = localStorage.getItem('kd-accessToken')), 43199);
        },
        loadModel() {
            if (!this.modelUrn) {
                return;
            }
            DynamicLoad.loadCss(RuntimeUtils.instance.obvCssPath);
            DynamicLoad.loadResourceLink(RuntimeUtils.instance.obvPropertiesPath);
            DynamicLoad.loadJs(RuntimeUtils.instance.obvJsPath).then(() => {
                this.initializeSampleViewer('view-model', this.modelUrn, this.getAccessToken, (obvApi) => {
                    console.log('obv 加载成功');
                    this.$emit('on-loaded-model', obvApi);
                });
            });
        },
        formatViewerModel(urn) {
            const urnList = urn.split(',');
            const guidList = this.guid ? this.guid.split(',') : [];
            const list = [];
            urnList.forEach((urnStr, index) => {
                const urnIndex = urnStr.indexOf(':');
                const documentUrn = urnIndex !== -1 ? urnStr.substr(urnIndex + 1) : urnStr;
                list.push({
                    documentUrn: Base64Util.decodeSafe(documentUrn),
                    guid: guidList[index],
                });
            });

            return list;
        },
    },
    mounted() {
        this.loadModel();
    },
    watch: {
        modelUrn() {
            this.loadModel();
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
